<!DOCTYPE html>
<html lang="en">
     <head>
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>助力进度</title>
          <style>
               html {
                    font-size: 50px;
                    /* (base/uiWidth)*100vw = (100/750)*100vw，之后使用rem单位时：设计稿100px -> 1rem，32px -> 0.32rem。这里设计稿总宽度为750px */
                    font-size: 13.33vw;
                    -webkit-text-size-adjust: 100%;
               }
               * {
                    box-sizing: border-box;
                    -webkit-box-sizing: border-box;
               }
               body, p, h1, h2, h3, h4, h5, h6, ul, li {
                    margin: 0;
                    padding: 0;
               }
               body {
                    max-width: 640px;
                    margin: 0 auto !important;
                    font-size: 14px;
                    line-height: 1.15;
                    font-family: 'Avenir', Helvetica, Arial, sans-serif;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    background: #e84c36 url('./img/bg.png') no-repeat center;
                    background-size: 100% auto;
               }
 
               @media (max-width: 320px) {
                    html {
                         font-size: 42px;
                         /* font-size: 41px; */
                    }
               }
               @media (min-width: 640px) {
                    html {
                         font-size: 85px;
                    }
               }

               .flex-row {
                    display: -webkit-flex;
                    display: flex;
               }
               .justify-content-center {
                    -webkit-justify-content: center;
                    justify-content: center;
               }
               .justify-content-sb {
                    -webkit-justify-content: space-between;
                    justify-content: space-between;
               }
               .align-items-center {
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                    align-items: center;
               }
               .flex-1 {
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    -webkit-flex: 1;
                    flex: 1;
                    overflow: hidden;
               }

               .progress-box {
                    width: 6.94rem;
                    text-align: center;
                    margin: .3rem auto;
                    padding: .64rem 5px .54rem;
                    background-color: #fefce5;
                    border-radius: .3rem;
               }
               .progress-title {
                    font-size: .34rem;
                    color: #742d21;
               }
               .progress-bar-wrap {
                    height: .78rem;
                    width: 5.5rem;
                    margin: .14rem auto .4rem;
                    position: relative;
               }
               .progress-float {
                    position: absolute;
                    left: 0;
                    top: 0;
                    display: inline-block;
                    min-width: .4rem;
                    height: .4rem;
                    line-height: .4rem;
                    font-size: .28rem;
                    color: #fff;
                    text-align: center;
                    background-color: #f8cd22;
                    border-radius: .1rem;
                    transform: translateX(-50%);
                    -webkit-transform: translateX(-50%);
               }
               .progress-float::after {
                    content: '';
                    width: 0;
                    height: 0;
                    border: .1rem solid transparent;
                    border-top-color: #f8cd22;
                    position: absolute;
                    bottom: -.19rem;
                    left: 50%;
                    transform: translateX(-50%);
                    -webkit-transform: translateX(-50%);
               }
               .progress-bar {
                    width: 100%;
                    height: .2rem;
                    background-color: #fdf0dd;
                    border-radius: .1rem;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    overflow: hidden;
               }
               .progress-filled {
                    width: 0;
                    height: 100%;
                    background-color: #fdc733;
               }
               .countdown-line {
                    font-size: .28rem;
                    color: #908e77;
                    line-height: .52rem;
               }
               .countdown-line strong {
                    min-width: .5rem;
                    height: .5rem;
                    text-align: center;
                    color: #fd9c2a;
                    background-color: #fde9c8;
                    border-radius: .1rem;
                    display: inline-block;
                    margin: 0 3px;
               }

               .progress-list-container {
                    width: 6.94rem;
                    margin: .3rem auto 60px;
                    padding: .4rem .66rem 1px;
                    background-color: #fefce5;
                    border-radius: .3rem;
                    position: relative;
               }
               .progress-list-title {
                    display: block;
                    width: 2.46rem;
                    height: .56rem;
                    margin: -.56rem auto 0;
               }
               .progress-empty-box {
                    height: 6rem;
                    text-align: center;
               }
               .progress-empty-box img {
                    width: 2.06rem;
                    height: 2.06rem;
                    margin-bottom: .24rem;
               }
               .progress-empty-box p {
                    font-size: .26rem;
                    color: #a1937b;
               }
               .progress-list li {
                    height: 1.7rem;
                    position: relative;
               }
               .progress-list li::after {
                    content: '';
                    width: 100%;
                    height: 1px;
                    background-color: #f4efd9;
                    position: absolute;
                    bottom: 0;
                    left: 0;
               }
               .progress-list .avatar {
                    width: 1rem;
                    height: 1rem;
                    margin-right: .28rem;
                    border-radius: 50%;
                    border: 3px solid #d3aa60;
               }
               .progress-list .name {
                    font-size: .3rem;
                    color: #814f39;
                    margin-bottom: .1rem;
                    /* 超出一行省略号 */
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
               }
               .progress-list .time {
                    color: #a47c61;
                    font-size: .24rem;
               }
               .progress-list .fail {
                    font-size: .26rem;
                    color: #b58872;
                    line-height: .3rem;
               }
               .progress-list .fail img {
                    width: .24rem;
                    height: .24rem;
                    vertical-align: middle;
                    margin-bottom: 1px;
               }
               .progress-list .fail span {
                    vertical-align: middle;
               }
               .poster-bottom {
                    text-align: center;
                    width: 100%;
                    /* 无需固定底部的话，把fixed改为relative即可 */
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    background-color: #e84c36;
               }
               .poster-bottom p {
                    line-height: .4rem;
                    color: #fe8378;
                    font-size: .24rem;
               }
               .poster-bottom p img {
                    height: .3rem;
                    vertical-align: middle;
               }
               .poster-bottom p span {
                    vertical-align: middle;
               }

               .m-dialog, .m-dialog-mask {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 999;
                    overflow: hidden;
                    display: none
               }
               .m-dialog-mask {
                    position: absolute;
                    z-index: 0;
                    background: #000;
                    opacity: .4;
               }
               .m-dialog.show, .m-dialog.show .m-dialog-mask {
                    display: block
               }
               .m-dialog.show-content .m-dialog-content {
                    top: 50%;
               }
               .m-dialog-content {
                    width: 68%;
                    max-width: 666px;
                    min-width: 320px;
                    background: #fff;
                    border-radius: 16px;
                    position: relative;
                    padding: .6rem .5rem .7rem;
                    top: 200%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    -webkit-transform: translate(-50%, -50%);
                    -webkit-transition: all .3s;
                    transition: all .2s;
                    text-align: center;
               }
               .m-dialog-title {
                    font-size: .34rem;
                    color: #1f1f1f;
                    font-weight: 600;
                    margin-bottom: .44rem;
               }
               .m-dialog-content .fail-img {
                    width: 2rem;
                    height: 2rem;
                    display: block;
                    margin: 0 auto .3rem;
               }
               .m-dialog-text {
                    font-size: .28rem;
                    color: #666;
                    word-break: break-all;
                    margin-bottom: .5rem;
                    line-height: 1.6;
               }
               .m-dialog-btn {
                    width: 4.28rem;
                    height: .84rem;
                    font-size: .32rem;
                    color: #fff;
                    font-weight: 600;
                    border-radius: .5rem;
                    border: 0;
                    background-color: #e84c36;
               }
               .m-dialog-close {
                    padding: 4px;
                    position: absolute;
                    top: .26rem;
                    right: .28rem;
                    z-index: 9;
               }
               .m-dialog-close img {
                    width: .24rem;
                    height: .24rem;
               }
               .rewardsButton{
                    display: block;
                    margin: 10px auto;
                    width: 100px;
                    text-align: center;
                    background: #fda94d;
                    color: #fff;
                    text-decoration: none;
                    border-radius: 5px;
                    padding: 10px 0;
                    box-shadow: 1px 1px 4px #feaa4c;
                    text-shadow: 1px 1px 4px #ffffff;
                    font-size: 14px;
               }
               /* 二维码 */
               .readauto .ReaDimg{
                    width: 2.6rem;
                    height: 2.6rem;
                    display: block;
                    margin: 0px auto;
               }
               .courseButton_container{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
               }
               .tipsText{
                    color: #fff;
                    display: block;
                    text-align: center;
                    font-size: 14px;
                    text-shadow: 1px 1px 4px #ffffff;
               }
          </style>
     </head>
<body>
<section class="progress-box">
     <!-- JS会自动 根据助力人数 计算进度条 -->
     <p class="progress-title">已有
          <strong id="progressCount">{$successCount}</strong>
               人完成助力，还差{$sy_number}人
          <strong id="progressTotal" hidden>{$successCount+$sy_number}</strong>
     </p>
     <section class="progress-bar-wrap">
          <div id="progressFloat" class="progress-float">{$successCount}</div>
          <div class="progress-bar">
               <div id="progressFilled" class="progress-filled"></div>
          </div>
     </section>
     <!-- 结束日期的时间戳（毫秒） -->
          <input id="expiredTime" type="hidden" value="{$fission->end_time * 1000}">
          <p id="countDownBox" class="countdown-line">
          还剩<strong>00</strong>天<strong>00</strong>时<strong>00</strong>分<strong>00</strong>秒后结束
          </p>
</section>
{if $qy_stage_prizes['stage_describe'] && $x_jd}
<div style="text-align:center;">{$qy_stage_prizes['stage_describe']}</div>
{/if}
{if $x_jd >= 1}
     {if $qy_stage_prizes['prize_type'] == 1}
          <div class="readauto">
               <img class="ReaDimg" src="{$qy_stage_prizes['qrcode']}" alt="二维码" >
          </div>
     {elseif $qy_stage_prizes['prize_type'] == 2}
          <div class="readauto">
               <div style="width: 2.6rem;display:block;margin:0px auto">
                    <a href="{$qy_stage_prizes['qrcode']}" class="rewardsButton">表单链接</a>
               </div>
          </div>
     {elseif $qy_stage_prizes['prize_type'] == 3}
          <div class="readauto">   
               {if $qy_stage_prizes['marked']}
                    <a class="tipsText">
                         {$qy_stage_prizes['marked']}
                    </a>
               {else}
                    <div style="width: 2.6rem;display:block;margin:0px auto">
                    兑换码：{$qy_stage_prizes['qrcode']}
                    </div>
               {/if}
          </div>
     {elseif $qy_stage_prizes['prize_type'] == 4}
          {if $qy_stage_prizes['marked']}
               <a class="tipsText">
                    {$qy_stage_prizes['marked']}
               </a>
          {else}
               <div class="readauto">
                    <img class="ReaDimg" src="{$qy_stage_prizes['qrcode']}" alt="核销码" >
               </div>
          {/if}
     {elseif $qy_stage_prizes['prize_type'] == 5}
          <div class="readauto">
               {if $qy_stage_prizes['marked']}
                    <a class="tipsText">
                    {$qy_stage_prizes['marked']}
                    </a>
               {else}
                    <div style="width: 2.6rem;display:block;margin:0px auto">
                         <a href="{$qy_stage_prizes['qrcode']}" class="rewardsButton" style="padding: 15px 0px;width: 140px; font-size: 16px;margin: 20px auto;">领取红包</a>
                    </div>
               {/if} 
          </div>
     {/if}
{/if}

{if $count != 1}
     {if $page != 1 && $qy_stage_prizes['stagesort'] <= $count}
     <a href="help_progress-{$fuserid}.html?page={$page-1}" class="rewardsButton" style="padding: 15px 0px;width: 140px; font-size: 16px;margin: 20px auto;">上一阶段奖励</a>
     {/if}
     {if $x_jd > 1 && $qy_stage_prizes['stagesort']!= $x_jd}
     <a href="help_progress-{$fuserid}.html?page={$page+1}" class="rewardsButton" style="padding: 15px 0px;width: 140px; font-size: 16px;margin: 20px auto;">下一阶段奖励</a>
     {/if}
{/if}
<!-- {if $type == 1}

<div class="readauto">
<img class="ReaDimg" src="{$qrcode}" alt="二维码" >
</div>

{elseif $type==2}
<div class="readauto">
<div style="width: 2.6rem;display:block;margin:0px auto">
<a href="{$qrcode}" class="rewardsButton">表单链接</a>
</div>
</div> 

{elseif $type==3}
<div class="readauto">   
{if !$qrcode}
<a class="tipsText">
{$marked}
</a>
{else}
<div style="width: 2.6rem;display:block;margin:0px auto">
兑换码：{$qrcode}
</div>
{/if}
</div>

{elseif $type==4}
{if !$qrcode}
<a class="tipsText">
{$marked}
</a>
{else}
<div class="readauto">
<img class="ReaDimg" src="{$qrcode}" alt="核销码" >
</div>
{/if}
{elseif $type==5}
<div class="readauto">
{if !$qrcode}
<a class="tipsText">
{$marked}
</a>
{else}
<div style="width: 2.6rem;display:block;margin:0px auto">
<a href="{$qrcode}" class="rewardsButton" style="padding: 15px 0px;width: 140px; font-size: 16px;margin: 20px auto;">领取红包</a>
</div>
{/if} 
</div>

{/if} -->

<section class="progress-list-container">
     <img class="progress-list-title" src="/fission/img/zhuli-bar.png" alt="">
     <!-- 助力为空时显示 --> 
     {if !count($helpUser)}
          <div class="flex-row justify-content-center align-items-center progress-empty-box">
               <div>
                    <img src="/fission/img/xinzan.png" alt="">
                    <p>暂无好友助力～</p>
               </div>
          </div>
     {/if}
     <ul class="progress-list">
          {loop $helpUser as $user}
               <li class="flex-row align-items-center">
               <img class="avatar" src="{$user->bind_user->avatar}" alt="头像">
               <div class="flex-1">
                    <p class="name"><strong>{$user->bind_user->name}</strong></p>
                    <p class="time">{date('Y-m-d H:i:s',$user->ctime)}</p>
               </div>
                    {if $user->help_status != 1}
                         <div onclick="toggleFailModel(this)" data-msg="企业已开启<strong>
                         【{if $user->fail_status == 1}企业新客户才能助力{else}删除员工好友后助力失效{/if}】</strong>，
                         {if $user->fail_status == 1}该客户在活动前已添加过企业其他员工{else}客户已流失{/if}，将不被计入助力次数" 
                         class="fail">
                              <span>助力失败</span><img src="/fission/img/icon-question.png" alt="">
                         </div>
                    {/if}
               </li>
          {/loop}
     </ul>

</section>
<div class="courseButton_container">
     <a href="ranking-{$fuser->id}.html" class="rewardsButton">排行榜</a>
     <a href="https://support.qq.com/products/174823/faqs/88710" class="rewardsButton">领取教程</a>
</div>

<!-- 助力失败弹窗体 -->
<div id="zhuliFailModel" class="m-dialog">
<div onclick="toggleFailModel(false)" class="m-dialog-mask"></div>
<section class="m-dialog-content">
     <div onclick="toggleFailModel(false)" class="m-dialog-close">
          <img src="" alt="">
     </div>
     <p class="m-dialog-title">助力失败</p>
     <img class="fail-img" src="/fission/img/warning.png" alt="">
     <p class="m-dialog-text">
          企业已开启<strong>【企业新客户才能助力】</strong>，该客户在活动前已添加过企业其他员工，将不被计入助力次数
     </p>
     <button onclick="toggleFailModel(false)" class="m-dialog-btn">我知道了</button>
</section>
</div>

<script>
(function() {
     var completeNum = document.getElementById('progressCount').innerText;
     var totalNum = document.getElementById('progressTotal').innerText;
     var progressWithUnit = 0;

     completeNum = parseInt(completeNum);
     totalNum = parseInt(totalNum);
     if (totalNum) {
          progressWithUnit = (completeNum / totalNum) * 100 + '%';
     }

     document.getElementById('progressFloat').style.left = progressWithUnit;
     document.getElementById('progressFilled').style.width = progressWithUnit;

     // 倒计时
     var expiredTime = document.getElementById('expiredTime').value;
     expiredTime = parseInt(expiredTime);

     if (expiredTime) {
          displayTime(expiredTime);
     }

     function displayTime(expired) {
          var dd = 0, hh = 0, mm = 0, ss = 0;
          var _now = Date.now();
          var restTime = expired - _now;
          if (restTime > 0) {
               var oneSecond = 1000
               ,oneMin = oneSecond * 60
               ,oneHour = oneMin * 60
               ,oneDay = oneHour * 24;

               dd = parseInt(restTime / oneDay);
               restTime -= oneDay * dd;
               hh = parseInt(restTime / oneHour);
               restTime -= oneHour * hh;
               mm = parseInt(restTime / oneMin);
               restTime -= oneMin * mm;
               ss = parseInt(restTime / oneSecond);
          }
          document.getElementById('countDownBox').innerHTML = '还剩<strong>' +
          formatNumber(dd) + '</strong>天<strong>' +
          formatNumber(hh) + '</strong>时<strong>' +
          formatNumber(mm) + '</strong>分<strong>' +
          formatNumber(ss) + '</strong>秒后结束';

          setTimeout(function() {
               displayTime(expired)
          }, 1000)
     }
     function formatNumber(n) {
          return n > 9 ? n : ('0' + n)
     }
})();
 
function toggleFailModel(e) {
     var dialog = document.getElementById('zhuliFailModel');
     var classList = dialog.classList;
     if (e) {
          dialog.getElementsByClassName('m-dialog-text')[0].innerHTML = e.dataset.msg
     }
     if (classList.contains('show')) {
          classList.remove('show', 'show-content')
     } else {
          classList.add('show');
          setTimeout(function() {
          classList.add('show-content')
          }, 100)
     }
}
</script>
<script>
window.onload=function(){
     window.history.replaceState('', '', "help_progress-{$fuserid}.html");
}
</script>
</body>
</html>